<template>
    <div class="performance-title">
        <span @click="store.changeshowCases">更多</span>
    </div>
    <div class="performance-nav">
        <div class="item active">
            <p class="til activeText">全部</p>
            <p class="co setColor activeText">案件总数量：999</p>
        </div>
        <div class="item">
            <p class="til">监督中</p>
            <p class="co setColor">案件总数量：99</p>
        </div>
        <div class="item">
            <p class="til">已办结</p>
            <p class="co setColor">案件总数量：900</p>
        </div>
    </div>
    <div class="performance-title1">
        <div class="tl1">监督员</div>
        <div class="tl2">案件名称</div>
        <div class="tl3">意见展示</div>
    </div>
    <div class="performance-content">
        <div class="item" v-for="(item,index) in list" :key="index">
            <div class="tl1">{{ item.name }}</div>
            <!-- <el-tooltip content="Bottom center" placement="bottom" effect="light">
            </el-tooltip> -->
            <div class="tl2 sl2">{{ item.ts1 }}</div>
            <div class="tl3 sl2">{{ item.ts2 }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/poups'
import { ref } from 'vue';
const store = useCounterStore()
let list = ref([
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'张海波',ts1:'对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助'},
    {name:'王家胜',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和法律帮助'},
    {name:'李力',ts1:'对国界桥文物保护公益诉讼案公开听证的监督活动',ts2:'对国界桥做好隔离墙拆除和后续保护修复工作'},
    {name:'赵勤',ts1:'对嵊州某公司破产程序案民事检察的监督活动',ts2:'参照租赁合同规定处理摊位并无不当，但不应以重签租赁合同为前置条件'},
    {name:'张全',ts1:'对金华杨某某刑事申诉案公开听证的监督活动',ts2:'通过司法救助和协调公安机关以补助形式为杨某某筹集款项助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
    {name:'芮世',ts1:'对宁海王某某司法救助案公开听证的监督活动对宁海王某某司法救助案公开听证的监督活动',ts2:'本案涉及重点救助对象，应予多元救助本案涉及重点救助对象，应予多元救助'},
    {name:'穆友媛',ts1:'对瑞安某医院行政处罚非诉执行监督争议化解案案件质量评查的监督活动',ts2:'切实了解侨资企业转型升级发展中的困难为其健康有序发展提供支持和…'},
])
</script>

<style lang="less" scoped>
.performance-title{
    width: 100%;
    height: 44px;
    margin: 0 0 12px 0;
    background-image: url("../../../assets/icon18.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-right: 17px;
    span{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #159AFF;
        float: right;
        line-height: 44px;
        cursor: pointer;
    }
}
.performance-nav{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .active{
        width: 164px !important;
        background-image: url("../../../assets/icon20.png") !important;
    }
    .activeText{
        text-align: center !important;
    }
    .item{
        width: 170px;
        height: 68px;
        background-image: url("../../../assets/icon19.png");
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 0 15px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .til{
            width: 100%;
            font-family: PingFangSC-SNaNpxibold;
            font-weight: 600;
            font-size: 14px;
            color: #FFFFFF;
        }
        .co{
            width: 100%;
            font-family: PingFangSC-SNaNpxibold;
            font-weight: 600;
            font-size: 15px;
        }
    }
}
.performance-title1{
    width: 100%;
    height: 28px;
    background: rgba(2, 49, 100, .2);
    margin-top: 12px;
    box-sizing: border-box;
    padding: 0 16px 0 12px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #159AFF;
    .tl1{
        width: 84px;
    }
    .tl2{
        width: 234px;
    }
    .tl3{
        flex: 1;
    }
}
/* 隐藏滚动条轨道 */
.performance-content::-webkit-scrollbar {
    display: none; /* 对于Chrome和Safari */
}
.performance-content{
    width: 100%;
    height: 438px;
    overflow-y: scroll;
    .item{
        width: 100%;
        height: 44px;
        margin-top: 4px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 12px;
        color: #D0DEEE;
        display: flex;
        align-items: flex-start;
        box-sizing: border-box;
        padding: 0 16px 0 12px;
        .tl1{
            width: 84px;
        }
        .tl2{
            width: 234px;
            box-sizing: border-box;
            padding-right: 34px;
        }
        .tl3{
            flex: 1;
        }
    }
    .item:nth-child(odd){
        background: rgba(71, 138, 138, 0);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
    .item:nth-child(even){
        background: rgba(71, 107, 138, 0.1);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
}
</style>